
<template>
  <div>
    <div class="category_title">
      <div class="shutiao"></div>
      <div>新增随访</div>
      <div class="button">
        <el-button type="primary" @click="getRowKeys">立即随访</el-button>
        <el-button
          type="primary"
          @click="click_on"
          style="margin-right:40px;margin-left:20px;"
          >返回</el-button
        >
      </div>
    </div>
    <el-tabs v-model="activeName" type="border-card" class="elementstyle">
      <el-tab-pane label="基本信息" name="first">
        <div v-if="activeName == 'first'">
          <the-basic-information
            @savebutton="accordingto"
            @thevalueof="accordingto1"
          ></the-basic-information>
        </div>
      </el-tab-pane>
      <el-tab-pane label="就诊信息" name="second" :disabled="tabOne">
        <div v-if="activeName == 'second'">
          <the-hospital-information :patId="patId"></the-hospital-information>
        </div>
      </el-tab-pane>
      <el-tab-pane label="检测信息" name="third" :disabled="tabOne">
        <div v-if="activeName == 'third'">
          <testing-information :patId="patId"></testing-information>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用药信息" name="fourth" :disabled="tabOne">
        <div v-if="activeName == 'fourth'">
          <the-medical-information :patId="patId"></the-medical-information>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import the_basic_information from "@/views/follow-up/the-basic-information";
import testing_information from "@/views/follow-up/testing-information";
import the_medical_information from "@/views/follow-up/the-medical-information";
import the_hospital_information from "@/views/follow-up/the-hospital-information";
export default {
  name: "followUpNew",
  components: {
    "the-basic-information": the_basic_information, //用户管理组件
    "testing-information": testing_information, //检测信息
    "the-hospital-information": the_hospital_information, //就诊信息
    "the-medical-information": the_medical_information //用药信息
  },
  props: [],
  data() {
    return {
      tabOne: true,
      activeName: "first",
      patId: null
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    accordingto(data) {
      this.tabOne = false;
      console.log(data, "弹框");
    },
    accordingto1(id) {
      this.patId = id;
      console.log(this.patId, "弹框1");
    },
    click_on() {
      this.$router.push({
        path: "follow-up-records"
      });
    },
    getRowKeys() {
      this.$router.push({
        path: "thepicture"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.category_title {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  margin-top: 20px;
  margin-left: 20px;
}
.shutiao {
  display: inline-block;
  width: 5px;
  height: 20px;
  border-radius: 28%;
  background-color: #4380ea;
  vertical-align: middle;
  margin-right: 6px;
}
.button {
  display: flex;
  margin-left: auto;
}
.tabs_panel {
  display: flex;
  margin-bottom: 30px;
  .tabs_items {
    font-size: 18px;
    font-weight: bold;
    color: #a1a8b3;
    margin-right: 40px;
    cursor: pointer;
    &.active_current {
      color: #4380ea;
    }
  }
}
.elementstyle {
  margin-left: 20px;
  margin-right: 20px;
}
</style>